/**
 * @Create by WebStorm
 * @Author: Pc
 * @Date: 2024-07-10 21:39
 * @Description：
 */
let currentHealth = 100,
    maxHealth = 100;
// 获取按键区域
let domTestArea = document.getElementsByClassName("test_area")[0],
    // 获取当前血量行内文本
    domCurrentHealth = document.querySelector(".current_health"),
    // 获取当前血量块元素
    domDataBar = document.querySelector('.healthy_data_bar'),
    // 获取延迟血量块元素
    domDelayBar = document.querySelector('.healthy_delay_bar')
console.log(domDataBar);
// 监听按键区域点击事件
domTestArea.addEventListener('click', function (event) {
    // 获取点击dom元素
    let target = event.srcElement.nodeName === 'SPAN' ? event.srcElement.parentNode : event.srcElement
    // 获取点击dom元素类名
    let targetName = target.className
    console.log(targetName)
    // 执行不同dom元素按钮事件
    switch (targetName) {
        case ('cure_small'):
            currentHealth += 1;
            break
        case ('cure_big'):
            currentHealth += 13;
            break
        case ('cure_max'):
            currentHealth = 100;
            break
        case ('damage_small'):
            currentHealth -= 1;
            break
        case ('damage_big'):
            currentHealth -= 16;
            break
        case ('damage_max'):
            currentHealth = 0;
            break
    }
    currentHealth = currentHealth > 100 ? 100 : currentHealth
    currentHealth = currentHealth < 0 ? 0 : currentHealth
    console.log(currentHealth)
    // 更新dom元素内容
    domCurrentHealth.textContent = currentHealth;
    domDataBar.style.width = `${currentHealth}%`; // 更新宽度
    domDelayBar.style.width = `${currentHealth}%`; // 更新宽度
    if (currentHealth > 70) {
        domDataBar.style.backgroundColor = `rgb(160, 260, 60)`
    } else if (currentHealth > 50) {
        domDataBar.style.backgroundColor = `rgb(180, 200, 70)`
    } else if (currentHealth > 30) {
        domDataBar.style.backgroundColor = `rgb(200, 160, 70)`
    } else {
        domDataBar.style.backgroundColor = `rgb(240, 90, 70)`
    }
})

